<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 	xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html"
    	xmlns:p="http://primefaces.org/ui"
    	xmlns:ec="http://www.b2cexpress.com.br/ecommerce"
    	xmlns:s="http://www.suricattus.com.br/jsf/ui"
		xmlns:sf="http://www.suricattus.com.br/jsf/fn"
    	xmlns:composite="http://java.sun.com/jsf/composite">
    	
	<composite:interface componentType="pagamentoComponente">
		
		<composite:attribute name="ordemPagamento" required="true"  />
		
		<composite:attribute name="valor" required="true" />
		<composite:attribute name="cupom" required="false"  />
		
		<composite:attribute name="desconto" required="false" default="true"  />
		
		<composite:attribute name="parcelado" required="false" default="true"  />
		
		<composite:attribute name="action" method-signature="void action()" />
	</composite:interface>
	
	<composite:implementation>
	
		<h:panelGroup id="groupDadosPagamento">
			<legend> #{labels['label.pagamento']}</legend> 
			
			<ec:fieldOutput id="selectTipoPagamento" renderSeparator="false">
				<p:selectOneRadio id="radioTiposPagamentos" value="#{cc.attrs.ordemPagamento.tipoPagamento}">
					<f:selectItems value="#{dadosPagamentoExternoController.tiposPagamentosPublicados}" var="_tipo" itemValue="#{_tipo}" itemLabel="#{_tipo.descricao}" />
					<p:ajax event="change" listener="#{cc.limparCamposPagamento}" update="groupDadosPagamento" />
				</p:selectOneRadio>
			</ec:fieldOutput>
			
			<p:outputPanel id="tipoPagamento">
				<h:panelGroup rendered="#{cc.attrs.ordemPagamento.tipoPagamento ne null}">
					<p:outputPanel id="dadosValorTotalPanel" rendered="#{cc.attrs.ordemPagamento ne null and cc.attrs.ordemPagamento.tipoPagamento eq 'BOLETO'}">
						<ec:fieldOutput id="imagemBoleto" renderSeparator="false">
							<h:graphicImage library="img" name="pagamento/tipo/boleto.png" />
						</ec:fieldOutput>
						<ec:fieldOutput id="percentualDesconto" label="#{labels['label.percentual.desconto.a.vista']}" rendered="#{cc.attrs.desconto}" >
							<h:outputText value="#{cc.parametrosPagamento.percentualDescontoAVista / 100}">
								<f:convertNumber type="percent" maxFractionDigits="2" minFractionDigits="2" minIntegerDigits="1"/>
							</h:outputText>
						</ec:fieldOutput>
						<ec:fieldOutput id="valorTotal" label="#{labels['label.valor.pagamento']}" rendered="#{cc.attrs.valor ne null}">
							<h:outputText value="#{cc.valorFinal}">
								<f:convertNumber currencySymbol="R$" type="currency" minIntegerDigits="1" maxFractionDigits="2" minFractionDigits="2"/>
							</h:outputText>
						</ec:fieldOutput>
					</p:outputPanel>
					
					<p:outputPanel id="dadosCartaoPanel" rendered="#{cc.attrs.ordemPagamento.tipoPagamento eq 'CARTAO_DE_CREDITO'}">
						<ec:fieldOutput id="bandeiras" renderSeparator="false">
							<h:panelGroup id="bandeiraGroup">
								<ui:repeat var="_bandeira" value="#{dadosPagamentoExternoController.recuperarCategoriasPagamentosPublicadas(cc.attrs.ordemPagamento.tipoPagamento)}">
									<h:graphicImage library="img/pagamento/categoria" name="#{_bandeira.id}.png" 
											styleClass="#{cc.attrs.ordemPagamento.bandeiraCartao ne _bandeira ? 'bandeira' : ''}" />
								</ui:repeat>
							</h:panelGroup>
							<h:message for="bandeiraGroup" />
						</ec:fieldOutput>
						
						<ec:field id="cartaoCredito" fieldId="cartaoCreditoField" label="#{labels['label.numero.cartao']}" required="true">
							<p:inputMask id="cartaoCreditoField" mask="mask:'9999-9999-9999-9999'" value="#{cc.attrs.ordemPagamento.numCartao}" 
									label="#{labels['label.numero.cartao']}" converter="cartaoConverter" validator="com.sun.faces.ext.validator.CreditCardValidator">
								<p:ajax event="blur" listener="#{cc.validarNumeroCartao}" update="cartaoCredito groupFinalizar bandeiras"  />
							</p:inputMask> 
						</ec:field>
						
						<ec:field id="nomeCartaoCredito" fieldId="nomeCartaoCreditoField" label="#{labels['label.nome.cartao']}" required="true" width="400px">
							<p:inputText id="nomeCartaoCreditoField" value="#{cc.attrs.ordemPagamento.nomeCartao}" 
									required="true" label="#{labels['label.nome.cartao']}" maxlength="50" />
							<h:outputText value=" #{labels['label.como.cartao']}" />
						</ec:field>
						
						<ec:field id="codigoSegurancaCredito" fieldId="codigoSegurancaCreditoField" label="#{labels['label.cadigo.seguranca']}" required="true">
							<p:inputMask styleClass="input-mini" id="codigoSegurancaCreditoField" mask="mask:'9999'" value="#{cc.attrs.ordemPagamento.codigoVerificacaoCartao}" 
									required="true" label="#{labels['label.cadigo.seguranca']}" />
						</ec:field>
						
						<ec:field id="validadeCredito" fieldId="validadeCreditoField" label="#{labels['label.validade.cartao']}" required="true">
							<p:inputMask styleClass="input-mini" id="validadeCreditoField" mask="mask:'19/99'" value="#{cc.attrs.ordemPagamento.mesAnoValidadeCartao}" 
									required="true" label="#{labels['label.validade.cartao']}" validator="validadeCartaoCreditoValidator" converter="validadeCartaoConverter">
							</p:inputMask> 
						</ec:field>
						
						<p:outputPanel autoUpdate="true">
							<h:panelGroup rendered="#{not cc.attrs.parcelado}">
								<ec:fieldOutput id="parcelamentoSimples" renderSeparator="false">
									<h:outputText value="#{cc.parcelamento.qtdParcelas} #{labels['label.veses.de']} R$ #{cc.formatValor(cc.parcelamento.valorParcela)} - #{labels['label.valor.total']} #{cc.formatValor(cc.parcelamento.valorTotal)}" 
											rendered="#{cc.parcelamento ne null}" />
								</ec:fieldOutput>
								
							</h:panelGroup>
							<h:panelGroup rendered="#{cc.attrs.parcelado}">
								<ec:field id="select" fieldId="selectField" label="#{labels['label.quantidade.parcelas']}" required="true">
									<h:selectOneMenu id="selectField" value="#{cc.parcelamento}" converter="indexConverter"
											label="#{cc.attrs.label}" required="#{sf:getDefaultValue(required, false)}" style="width:350px;"
											disabled="#{cc.attrs.ordemPagamento.bandeiraCartao eq _bandeira}">
										<f:selectItems value="#{cc.parcelamentos}" var="_parcelamento" itemValue="#{_parcelamento}"
												itemLabel="#{_parcelamento.qtdParcelas} #{labels['label.veses.de']} R$ #{cc.formatValor(_parcelamento.valorParcela)} - #{labels['label.valor.total']} #{cc.formatValor(_parcelamento.valorTotal)}" />
										<p:ajax process="@this" event="blur" listener="#{cc.setValue}" />												
									</h:selectOneMenu>
								</ec:field>
							</h:panelGroup>
						</p:outputPanel>
						
					</p:outputPanel>
					<h:panelGroup id="groupFinalizar">
						<div class="form-actions">
							<p:commandLink id="pagamentoBtn" action="#{cc.attrs.action}" styleClass="btn btn-success" update="@form" process="@form" ajax="false"
									onclick="statusDialog.show()" oncomplete="statusDialog.hide()"
									disabled="#{cc.attrs.valor eq null or (cc.attrs.ordemPagamento.tipoPagamento eq 'CARTAO_DE_CREDITO' and cc.attrs.ordemPagamento.bandeiraCartao eq null)}">
								<i class="icon-ok icon-white" />
								<h:outputText value="#{labels['botao.finalizar']}" />
								<p:defaultCommand target="pagamentoBtn" />
							</p:commandLink>
						</div>
					</h:panelGroup>
				</h:panelGroup>
			</p:outputPanel>
		</h:panelGroup>
	</composite:implementation>
</html>